﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Mx | 友链状态查询</title>
  <link rel="shortcut icon" href="https://mx142.cn/medias/logo.png" type="image/x-icon" />
  <link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/dhgdt.css">
  <style>
  .footer {
    text-align: center;
    padding-top: 16px;
    width: 100%;
    height: 50px;
  }
  .wname {
    font-size:16px;
  }
  .label-status {
    margin-right: 5px;
  }
  .check>tbody>tr>td {
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .check th {
    text-align: center;
  }
  .check .center {
    text-align: center;
    vertical-align: middle;
  }
  .check .sertitle {
    vertical-align: middle;
  }
  .status-success {
    color: #5cb85c
  }
  .status-warning {
    color: #f0ad4e
  }
  .status-danger {
    color: #d9534f
  }
  #server-container {
    border-bottom: 1px solid #ddd;
  }
  .barl > td {
    border-top: none !important;
    padding: 0 !important;
  }
  .barl .progress {
    margin:0;
    border-radius:0;
    height: 8px;
    box-shadow: none;
  }
  .barl .progress .progress-bar {
    box-shadow: none;
    opacity: 0.7;
  }
  .barl .progress .progress-bar:hover {
    opacity: 1;
  }
  .barl .progress .progress-bar-default {
    background-color: #EFEFEF;
  }
  .progress .tooltip .tooltip-inner .ttime {
    color: #A3A3A3;
    font-size: 11px;
  }
  .credit {
    font-size: 12px;
    color: #BBB;
  }
  .credit a {
    color: #999;
  }
  .credit .pipe {
    padding-left: 6px;
    padding-right: 6px;
    color: #DDD;
  }
  </style>
</head>
<body>
    <div class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="navbar-header">
                        <ul class="nav navbar-nav navbar-right">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1">
                <div id="stattip-err" class="alert alert-warning hide" role="alert">
                    <b>状态监控：</b>超过30天处于异常状态将被移除友链喔，望周知
                </div>
                <div id="stattip-ok" class="alert alert-success hide" role="alert">
                    <b>当前状态：</b>友链都很健康
                </div>
                <div id="stattip-load" class="alert alert-info" role="alert">
                    <b>当前状态：</b>检测友链状态中~
                </div>
                <div class="table-responsive">
                    <table class="table table-hover check">
                        <thead>
                            <tr id="server-title">
                            </tr>
                        </thead>
                        <tbody id="server-container"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="container">
            <p><span class="glyphicon glyphicon-refresh"></span> <span id="last-update"></span></p>
            <p class="credit">© 2021 <a target="_blank" href="https://mx142.cn/">详情</a> | <a href="https://mx142.cn/">Mx</a>. All Rights Reserved.</p>
        </div>
    </div>
    <script type="template/mustache" id="server-template">
    <tr class="{{alert}}">
      <td rowspan="2" class="sertitle">
        <span class="label label-status label-{{label}}"><span class="glyphicon glyphicon-{{statusicon}}"></span> {{statustext}}</span>
        <span class="wname">
		{{friendly_name}}
		</span>
      </td>
      {{#charts}}
      <td class="center">
      <span class="status-{{uptype}} set-tooltip" data-toggle="tooltip" data-placement="top" title="{{uptimetext}}"><span class="glyphicon glyphicon-{{upsign}}"></span></span>
      </td>
      {{/charts}}
    </tr>
    <tr class="{{alert}} barl">
      <td colspan="8" class="barls">
        <div class="progress">
        {{#progress}}
          <div class="progress-bar progress-bar-{{types}} set-tooltip" style="width: {{len}}%" data-toggle="tooltip" data-placement="top" title="{{stattip}}"></div>
        {{/progress}}
       </div>
      </td>
    </tr>
    </script>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/mustache.min.js" type="text/javascript"></script>
    <script src="js/config.js" type="text/javascript"></script>
    <script src="js/cup.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(myApp.dashboard.init);
    </script>
    <script>
        //debug调试时跳转页面
        var element = new Image();
        Object.defineProperty(element, 'id', { get: function () { window.location.href = "https://pic.downk.cc/item/5fe1a6073ffa7d37b349bf90.jpg" } });
        console.log(element);
    </script>
    <script>
        // ctrl+s保存
        document.onkeydown = function () {
            if ((e.ctrlKey) && (e.keyCode == 83)) { //ctrl+s
                return false;
            }
        }
        window.addEventListener("keydown", function (e) {
            //可以判断是不是mac，如果是mac,ctrl变为花键
            //event.preventDefault() 方法阻止元素发生默认的行为。
            if ((e.key == 's' || e.key == 'S') && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
                e.preventDefault();
            }
        }, false);
    </script>

</body>
</html>
